<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>一次上传多个文件1</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            
            $(document).ready(function () {

                $("#btn_upload").click(function () {

                    var formData=new FormData($("#uploadForm")[0]);
                    
                    $.ajax({
                        url: 'umps1',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            alert("上传成功");
                        },
                        error: function () {
                            alert("error");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container text-warning">

            <h1 class="text-center bg-success text-success padding10">一次性上传多个文件1</h1>
            <hr>


            <div>            

                <form id="uploadForm" class="form-inline">
                    用户编号：<input type="text" name="id" value="666" class="form-control">
                    <br><br>
                    <!--label的for用于指定一个表单元素的id，实现将label和指定的表单元素绑定-->
                    <!--如果label是和一个文件选择框绑定，则点击label和点击文件选择框一个效果-->
                    <label id="realBtn" class="img-thumbnail upload" for="fileInput">
                        +点此选择图片
                    </label>
                    <!--如果将multiple属性设置为true，则一次上传多个文件-->
                    <input type="file" id="fileInput" multiple="true" name="file" style="display: none;">
                    <button type="button" id="btn_upload" class="btn btn-success">上传</button>
                </form>
            </div>

            <div class="text-center fixed">
                <img src="images/lxh01.gif" alt="罗小黑">
                <br><br>
                <a href="index.jsp" class="btn btn-sm btn-danger">返回首页</a>
            </div>

        </div>
    </body>
</html>
